<template>
  <div>
    <!-- <DarkModeSwitcher/> -->
    <div class="container sm:px-10">
      <div class="block xl:grid grid-cols-2 gap-4">
        <!-- BEGIN: Login Info -->
        <div class="hidden xl:flex flex-col min-h-screen">
          <a href="" class="-intro-x flex items-center pt-5">
            <img
                alt="Midone Tailwind HTML Admin Template"
                class="w-6"
                src="@/assets/images/logo.svg"
            />
            <span class="text-white text-lg ml-3"> 应急装备信息采集与管理平台 </span>
          </a>
          <div class="my-auto">
            <img
                alt="Midone Tailwind HTML Admin Template"
                class="-intro-x w-1/2 -mt-16"
                src="@/assets/images/illustration.svg"
            />
            <div
                class="-intro-x text-white font-medium text-4xl leading-tight mt-10"
            >
              新兴际华应急研究总院
              <br/>
<!--              能源智能化解决方案-->
            </div>
            <div
                class="-intro-x mt-5 text-lg text-white text-opacity-70 dark:text-slate-400"
            >
              E2Board:EmergencyEquipBoard
            </div>
          </div>
        </div>
        <!-- END: Login Info -->
        <!-- BEGIN: Login Form -->
        <div class="h-screen xl:h-auto flex py-5 xl:py-0 my-10 xl:my-0">
          <div
              class="my-auto mx-auto xl:ml-20 bg-white dark:bg-darkmode-600 xl:bg-transparent px-5 sm:px-8 py-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto"
          >
            <h2
                class="intro-x font-bold text-2xl xl:text-3xl text-center xl:text-left"
            >
              系 统 登 录
            </h2>
            <div class="intro-x mt-2 text-slate-400 xl:hidden text-center">
              应急装备信息采集与管理平台
            </div>
            <div class="intro-x mt-8">
              <div class="form-box mb-5 relative">
                <input
                    type="text"
                    class="intro-x login__input form-control py-3 px-4 block"
                    placeholder="手机号"
                    @blur="requireUsername"
                    @keyup="requireUsername"
                    v-model="params.username"
                />
                <label ref="usernameRef"></label>
              </div>
              <div class="form-box mb-5 relative">
                <input
                    class="intro-x login__input form-control py-3 px-4 block mt-4"
                    placeholder="密码"
                    ref="password"
                    @blur="requirePassword"
                    @keyup="requirePassword"
                    v-model="params.password"
                />
                <label ref="passwordRef"></label>
              </div>
            </div>
            <div
                class="intro-x flex text-slate-600 dark:text-slate-500 text-xs sm:text-sm mt-4"
            >
              <div class="flex items-center mr-auto">
                <input
                    id="remember-me"
                    type="checkbox"
                    class="form-check-input border mr-2"
                />
                <label class="cursor-pointer select-none" for="remember-me"
                >记住登录</label
                >
              </div>
              <a href="">忘记密码?</a>
            </div>
            <div class="intro-x mt-5 xl:mt-8 text-center xl:text-left">
              <button
                  class="btn btn-primary py-3 px-4 w-full xl:w-32 xl:mr-3 align-top"
                  @click="login()"
              >
                登 录
              </button>
              <button
                  class="btn btn-outline-secondary py-3 px-4 w-full xl:w-32 mt-3 xl:mt-0 align-top"
              >
                注 册
              </button>
            </div>
            <div
                class="intro-x mt-10 xl:mt-24 text-slate-600 dark:text-slate-500 text-center xl:text-left"
            >
              登录本系统，表示您同意我们的
              <a class="text-primary dark:text-slate-200" href=""
              >服务条款</a
              >
              &
              <a class="text-primary dark:text-slate-200" href=""
              >隐私协议</a
              >
            </div>
          </div>
        </div>
        <!-- END: Login Form -->
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, getCurrentInstance} from "vue";
// import DarkModeSwitcher from "@/components/dark-mode-switcher/Main.vue";
import dom from "@left4code/tw-starter/dist/js/dom";
import {useRouter} from "vue-router";
import {ElMessage} from 'element-plus'

const router = useRouter();
import * as $api from "@/api/api.js";
import {SystemQueryConfig} from "@/api/api.js";

const {proxy} = getCurrentInstance();

onMounted(() => {
  dom("body").removeClass("main").removeClass("error-page").addClass("login");
});

const usernameRef = ref();
const passwordRef = ref();
const params = ref({
  username: "",
  password: "",
});

const requireUsername = () => {
  if (params.value.username == "") {
    usernameRef.value.textContent = "请输入用户名";
    usernameRef.value.classList.add("error");
  } else {
    usernameRef.value.textContent = "";
    usernameRef.value.classList.remove("error");
  }
};
const requirePassword = () => {
  if (params.value.password == "") {
    passwordRef.value.textContent = "请输入密码";
    passwordRef.value.classList.add("error");
  } else {
    passwordRef.value.textContent = "";
    passwordRef.value.classList.remove("error");
  }
};
const login = () => {
  // router.push("/admin-home");
  // requireUsername();
  if (params.value.username === "" || params.value.password === "") {
    requireUsername();
    requirePassword();
  } else {
    let loginParams = {
      userAcc: params.value.username,
      userPwd: params.value.password,
    }
    $api.Login(loginParams).then((data) => {
      console.log(data)
      proxy.$userInfor({
        userId: data.userKey,
        userAcc: data.userAcc,
        userName: data.userName,
        userPwd: data.userPwd,
        stopFlag: data.stopFlag,
        isAdmin: data.adminFlag,
      });
      localStorage.setItem("userKey", data.userKey);
      localStorage.setItem("userAcc", data.userAcc);
      localStorage.setItem("unitKey", data.unitKey);
      localStorage.setItem("regionName", data.regionName);
      localStorage.setItem("regionCode", data.regionCode);
      localStorage.setItem("cityName", data.cityName);
      localStorage.setItem("cityCode", data.cityCode);
      localStorage.setItem("userName", data.userName);
      localStorage.setItem("companyFlag", data.companyFlag);
      localStorage.setItem("adminFlag", data.adminFlag);
      localStorage.setItem("token", "sssssssssssssssssssssssssssssssssssssssssssssssssssss"); // 存储 token
      // queryPlant();
      if(data.companyFlag) {
        router.push("/home");
      } else {
        router.push("/admin-home");
      }
      // router.push("/home");
    }).catch(err => {
      ElMessage.error(err)
    })
  }
  // router.push("/dashboard-overview-1");
};
// const queryPlant = () => {
//   $api.SystemQueryConfig().then((res) => {
//     localStorage.setItem("unitName", res.plantName);
//     router.push("/home");
//   }).catch(err => {
//     router.push("/home");
//   });
// };
</script>
<style scoped lang="scss">
.form-box {
  label {
    position: absolute;
    left: 0;
    z-index: 9;
    color: #ff0000;
    font-size: 14px;
    transition: 0.25s right linear;
    transform: translate(0, 0);
  }
}
</style>
